<template>
  <div>
    <div class="mv-details clearfix">
      <div class="mv-details-left"></div>
      <div class="mv-details-center">
        <div class="mv-title">mv详情</div>
        <div class="mv-video-position">
          <VideoPlayer
            :url="mvPlyaInfo.url"
            ref="video"
          />
        </div>
      </div>
      <div class="mv-details-right">
        <div class="mv-right-title">相关推荐</div>
        <div class="mv-right-lists">
          <ul>
            <li
              class="clearfix"
              v-for="(mv,index) in mvList"
              :key="index"
            >
              <div class="mv-block fl">
                <div class="mv-cover">
                  <img :src="mv.cover">
                  <div class="mv-play-num">6000</div>
                  <div class="mv-time">03:22</div>
                </div>

              </div>
              <div class="mv-recommend fl">
                <div class="mv-recomend-block">
                  <div>{{mv.artistName}}</div>
                  <div>{{mv.name}}</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMvDetail, getMvUrl, getArtists, getSimiMv } from "@/api"
import { mapMutations } from "@/store/helper/music"
import { hideMenuMixin } from "@/utils"
export default {
  mixins: [hideMenuMixin],
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      url: '../../assets/vuex.mp4',
      mvPlyaInfo: '',
      mvList: []
    }
  },
  methods: {
    ...mapMutations(["setPlayingState"]),
    async initMv() {
      const { data: mvPlyaInfo } = await getMvUrl(this.id)
      this.mvPlyaInfo = mvPlyaInfo
      const { mvs: mvList } = await getSimiMv(this.id)
      this.mvList = mvList
      console.log(this.mvList)
    }
  },
  created() {
    this.setPlayingState(false)
    this.initMv()
  }
}
</script>

<style lang="scss" scoped>
.mv-details {
  min-width: 1200px;
  > div {
    float: left;
  }
  .mv-details-left {
    &::before {
      content: ".";
      display: block;
      position: relative;
      left: -9999px;
    }
    width: 20%;
  }
  .mv-details-center {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding-right: 20px;
    .mv-title {
      margin-top: 1rem;
      font-size: 1.3rem;
      font-weight: 600;
    }
    .mv-video-position {
      border-radius: 5px;
      margin-top: 10px;
      overflow: hidden;
      > video {
        width: 40rem;
        height: 35rem;
      }
    }
  }
  .mv-details-right {
    width: 30%;
    .mv-right-title {
      margin-top: 1rem;
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 20px;
    }
    ul {
      > li {
        margin-bottom: 10px;
      }
    }
    .mv-cover {
      width: 130px;
      height: 70px;
      overflow: hidden;
      border-radius: 5px;
      position: relative;
      color: #fff;
      font-size: 8px;
      img {
        width: 100%;
        height: 100%;
      }
      .mv-play-num {
        position: absolute;
        right: 3px;
        top: 0;
      }
      .mv-time {
        position: absolute;
        bottom: 0;
        right: 3px;
      }
    }
    .mv-recommend {
      .mv-recomend-block {
        position: relative;
        left: 5px;
        top: 1.5rem;
        div {
          &:nth-child(2) {
            color: #e6e6fa;
          }
        }
      }
    }
  }
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.fl {
  float: left;
}
</style>